import { useEffect, useState } from 'react';
import { IGetDataParams, useStaticsRange } from './useStatRange';
import { useTemperatureUnit } from '@/hooks/useUnit';
import { c2f, scaleNumber } from '@ray-js/panel-sdk/lib/utils';
import Strings from '@/i18n';

export const useToiletTimeRange = (params: IGetDataParams) => {
  const [result, isLoading, isEmpty, errorMsg] = useStaticsRange(params);

  const unit = useTemperatureUnit();
  const [options, setOptions] = useState({
    color: ['#30BFDE'],
    xAxis: {
      type: 'category',
      data: [],
      axisLabel: {
        interval: 0, // 强制显示所有标签
        width: 100, // 标签的最大宽度（超出会自动换行或截断）
        overflow: 'truncate', // 超出宽度时截断（配合width使用）
        ellipsis: '...', // 截断后显示的省略符
        minWidth: 100, // 标签的最小宽度（避免过窄）
      },
      axisTick: {
        show: false, // 不显示刻度线（默认为 true）
      },
      axisLine: {
        show: false,
      },
    },
    yAxis: {
      position: 'left',
      show: true,
      splitLine: {
        lineStyle: {
          color: 'rgba(0, 0, 0, 0.2)',
          type: 'dashed',
        },
      },
      axisLabel: {
        formatter: '{value}',
      },
      axisLine: {
        show: false,
      },
      axisTick: {
        show: true, // 不显示刻度线（默认为 true）
      },
    },
    series: [
      {
        type: 'line',
        name: Strings.getLang('temper'),
        areaStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: '#30BFDE', // 0% 处的颜色
              },
              {
                offset: 1,
                color: 'rgba(255, 255, 255, 0)', // 100% 处的颜色
              },
            ],
            global: false, // 缺省为 false
          },
        },
        lineStyle: {
          color: '#fff',
        },
        data: [],
        smooth: true,
      },
    ],
    dataZoom: [
      {
        type: 'inside', // 滑动条型滚动（也可配置为inside：鼠标滚轮滚动）
        xAxisIndex: 0, // 作用于第0个x轴
        start: 0, // 初始显示范围的起始百分比（0%表示从第一个点开始）
        end: 30, // 初始显示范围的结束百分比（30%表示一屏约显示24*30%≈8个点）
      },
    ],
    backgroundColor: '#242424',
  });

  useEffect(() => {
    if (!result) return;
    setOptions({
      ...options,
      xAxis: {
        ...options.xAxis,
        data: result.x,
      },
      series: [
        {
          ...options.series[0],
          data: result.y.map(value => {
            if (isNaN(Number(value))) return 0; // 如果不是数字，返回0
            return unit === 'c' ? Math.round(value * 10) / 10 : c2f(value);
          }),
        },
      ],
    });
  }, [result]);

  return [options, isLoading, isEmpty, errorMsg];
};
